<template>
  <el-container>
    <el-header height="40px" style="background-color: #00838f;">
      <h5 style="color: #fff;line-height: 40px;font-family: 'Microsoft YaHei',serif">订单列表</h5>
    </el-header>
    <el-main style="background-color: #fff;">
      <el-input placeholder="请输入订单号" v-model="search.value" class="input-with-select" span="12" clearable @clear="dataShuaxin">
        <el-select v-model="search.method" slot="prepend" placeholder="请选择" :value="search.method">
          <el-option label="订单号" value="订单号"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="dataFilter"></el-button>
      </el-input>
      <el-dialog title="订单发货" :visible.sync="dialogFormVisible">
        <el-form :model="form" ref="form">
          <el-form-item label="快递单号" :label-width="formLabelWidth">
            <el-input v-model="form.CourierNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="快递公司" :label-width="formLabelWidth" prop="CourierCompany">
            <el-select v-model="form.CourierCompany" placeholder="请选择快递公司">
              <el-option label="顺丰" value="顺丰"></el-option>
              <el-option label="中通" value="中通"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="fahuo">确认发货</el-button>

        </div>
      </el-dialog>
      <el-dialog title=订单详情 :visible.sync="orderDetails">
        <el-table :data="gridData">
          <el-table-column property="name" label="基本信息" width="300"></el-table-column>
          <el-table-column property="data" label="" width="300"></el-table-column>
        </el-table>
      </el-dialog>

      <el-table
        ref="multipleTable"
        :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">


        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column align="center"
                         label="订单号"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.order_id }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="收货人"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.user_nickname }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="交易时间"
                         width="200">
          <template slot-scope="scope">
            {{ scope.row.order_place_time}}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="付款时间"
                         width="200">
          <template slot-scope="scope">
            {{ scope.row.order_pay_time }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="发货时间"
                         width="200">
          <template slot-scope="scope">
            {{ scope.row.order_deliver_time }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="完成时间"
                         width="200">
          <template slot-scope="scope">
            {{ scope.row.order_receive_time }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="tag"
                         label="状态"
                         width="100"
                         :filters="[{ text: '待付款', value: '待付款' },
                         { text: '待发货', value: '待发货' },{ text: '待收货', value: '待收货' }
                         ,{ text: '已完成', value: '已完成' }]"
                         :filter-method="filterTag"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="toggleButtonChange(scope.row.order_state).StateColor"
                    disable-transitions>
              {{scope.row.order_state}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column  align="center" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"

              @click="delivery(scope.$index, scope.row)"
              v-if="$store.state.userInfo.employeeLv!=='门店管理员'">发货</el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            <!--<el-button-->
              <!--size="mini"-->
              <!--type="danger"-->
              <!--@click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page='currentPage'
        :page-sizes="[10, 20, 50, 100]"
        :page-size='pageSize'
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length">
      </el-pagination>
      <!--<el-button size="mini" type="info"  @click="delivery(scope.$index, scope.row)">全部发货</el-button>-->
      <!--<el-button type="info" size="mini" disabled>导出 Excel</el-button>-->
    </el-main>

  </el-container>
</template>

<script>
  import buttons from '../zys/buttons'//引入按钮组件
  import searchbox from '../ZF/searchbox'
  export default {
    name: "orderList",
    components: {
      searchbox,
      buttons,
    },

    //表格数据的操作方法
    data() {
      return {
        // table数据传入
        gridData:[],//form
        list: [],
        search: {
          method: '订单号',
          value: null
        },
        currentPage: 1,
        pageSize: 10,
        pageIndex: 1,
        dialogFormVisible: false,
        orderDetails:false,
        form: {
          CourierNumber: '',
          CourierCompany: '',
          orderid:'',
          detailsID:''
        },
        formLabelWidth: '110px',

      }
    },

    methods: {
      //查询全部获取
      dataShuaxin() {
        this.$axiosx.get('/api/backGetorderlist')
          .then((response) => {
            console.log('1111');
            this.list = response.data;
            for(let i=0;i<(this.list).length;i++){
              // console.log((this.list[i]).order_pay_time);
              let pay=(this.list[i]).order_pay_time;
              let fahuo=(this.list[i]).order_deliver_time;
              let succ=(this.list[i]).order_receive_time;
              if(fahuo!=null&&succ!=null&&pay!=null){
                (this.list[i]).order_state='已完成'
              }else if(fahuo==null&&succ==null&&pay==null){
                (this.list[i]).order_state='待付款'
              } else if(fahuo==null&&succ==null&&pay!=null){
                (this.list[i]).order_state='待发货'
              }else
              if(fahuo!=null&&succ==null&&pay!=null){
                (this.list[i]).order_state='待收货'
              }else
              if(fahuo!=null){
                (this.list[i]).order_state='待收货'
              }
            }
            console.log(response.data);

          });
      },
      //订单状态改变
      toggleButtonChange (param) {
        if (param === '待付款') {
          return {
            string: '待付款',
            color: 'warning',
            StateColor: 'warning'
          }
        } else if (param === '待收货') {
          return {
            string: '待收货',
            color: 'danger',
            StateColor: 'danger'
          }
        }else if (param === '已完成') {
          return {
            string: '已完成',
            color: 'success',
            StateColor: 'success'
          }
        }else {
          return {
            string: '待发货',
            color: 'info',
            StateColor: 'info'
          }
        }
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      // 选中行
      handleSelectionChange(val) {
        console.log('val:', val)
      },
      //发货按钮
      fahuo(){
        this.dialogFormVisible = false;
        this.$axiosx.get('/api/backAddData',{params:this.form})
          .then((response) => {
            console.log(this.form);
            console.log('1111');
            this.dataShuaxin()
          });
      },

      //发货
      delivery(index,row){
        console.log(this);
        console.log(' index:', index);
        console.log(' row:', row);
        this.dialogFormVisible=true;
        this.form.orderid=index+1;


      },
      // 查看
      handleEdit(index, row) {
        console.log(' index:', index);
        console.log(' row:', row);
        this.orderDetails=true;
        this.gridData=[
          {
          name:'订单编号',
          data:row.order_id
        },
          {
            name:'收货人',
            data:row.user_nickname
          },
          {
            name:'交易时间',
            data:row.order_place_time
          },
          {
            name:'付款时间',
            data:row.order_pay_time
          },
          {
            name:'订单金额',
            data:row.order_amount
          },
          {
            name:'支付方式',
            data:row.order_pay_method
          },
          {
            name:'商品名称',
            data:row.SKU_name
          },
          {
            name:'商品数量',
            data:row.order_SKU_num
          },
          {
            name:'订单状态',
            data:row.order_state
          }
        ]

      },
      // 删除
      handleDel(index, row) {
        console.log(' index:', index);
        console.log(' row:', row)
      },
      filterTag(value, row) {
        return row.order_state === value;
      },
      //搜索
      dataFilter () {
        switch (this.search.method) {
          case '订单号':
            this.list.forEach((val, index, arr) => {
              console.log(11111)
              console.log(val)
              if (val.order_id === parseFloat(this.search.value)) {
                this.list = [val]
              }
            });
            break
        }
      }
    },

    created(){
      this.dataShuaxin()
    },

  }
</script>

<style scoped>
  .el-pagination{
    float: right;
  }
  .el-select{
    width: 130px;
  }
  .input-with-select.el-input.el-input-group.el-input-group--append.el-input-group--prepend {
    width: 500px;
  }
</style>
